<template>
  <div v-loading="loading"
       element-loading-text="正在登陆"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-form ref="loginForm" :rules="rules" :model="loginForm" class="loginContainer">
      <h2 class="loginTitle">系统登录</h2>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名" @keydown.enter.native="submitLogin"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keydown.enter.native="submitLogin"/>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="loginForm.code" type="text" auto-complete="off" placeholder="点击图片刷新验证码" @keydown.enter.native="submitLogin"/>
        <img :src="vrUrl" @click="updateCode">
      </el-form-item>
      <el-checkbox class="loginRemember" v-model="checked"/>
      <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>

export default {
    name: "Login",
    data() {
        return {
          vrUrl:"/verifyCode?time="+new Date(),
          loading:false,
          checked : true ,
          loginForm: {
            username: 'admin',
            password: '123',
            code: ''
          },
          rules: {
            username: [{required: true, message: '请输入用户名', trigger: 'blur' }],
            password: [{required: true, message: '请输入密码', trigger: 'blur' }],
            code: [{required: true, message: '请输入验证码', trigger: 'blur' }]
          }
        }
    },
  methods: {
      updateCode(){
        this.vrUrl = "/verifyCode?time="+new Date();
      },
      submitLogin(){
        this.loading = true;
        this.$refs.loginForm.validate((valid) => {
          this.loading = false;
          if (valid) {
            this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
              if(resp){
                this.$store.commit("INIT_CURRENTHR",resp.obj);
                window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                let path = this.$route.query.redirect;
                this.$router.replace((path === '/' || path === undefined)?'/home':path);
              }else{
                this.vrUrl = "/verifyCode?time="+new Date();
              }
            })
            //alert('submit!');
          } else {
            const h = this.$createElement;
            this.$notify({
              message: h('i', { style: 'color: #f56c6c;font-weight: bold'}, '请补全信息')
            });
            this.vrUrl = "/verifyCode?time="+new Date();
            return false;
          }
        });
      }
    }
}
</script>

<style>
  .loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 160px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid rgba(167, 164, 156, 0.667);
    box-shadow: 0 0 30px #cac6c6;
  }
  .loginTitle {
    margin: 10px auto 35px auto;
    text-align: center;
    color: #797575;
  }
  .loginRemember {
    margin: 0 0 15px 0;
    text-align: left;
  }
  .el-form-item__content {
    display: flex;
    align-content: center;
  }
</style>